<template>
  <ContainerGroup>
    <Container height="fill" :scroll-y="true" display="flexY">
      <div class="search-box">
        <div class="input-left">
          <span class="form-item-label">预约日期：</span>
          <el-date-picker
            v-model="ruleForm.timeDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            size="mini"
          />
          <span class="form-item-label" style="margin-left: 10px">医生：</span>
          <el-select
            v-model="ruleForm.jobNumber"
            placeholder="请选择"
            filterable
            size="mini"
            remote
            :remote-method="getDoctListVue"
            :loading="ysLoading"
            clearable
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.value + '-' + item.lable"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="right-btn">
          <Button icon="search" @click="_search">查询</Button>
          <Button icon="export" @click="_DownLoad">导出</Button>
        </div>
      </div>
     <div class="table-box">
       <el-table
        v-loading="loading"
        :data="tableData"
        :span-method="objectSpanMethod"
        stripe
        border
        :header-cell-style="{ background: '#f5f7fa' }"
        style="width: 100%"
        height="100%"
      >
        <el-table-column
          prop="deptName"
          label="科室"
          align="center"
          width="120"
        />
        <el-table-column
          prop="docName"
          align="center"
          label="开单医生"
          width="120"
        />
        <el-table-column prop="name" align="left" label="患者信息" width="220">
          <template slot-scope="scope">
            <p style="font-size: 14px">姓名：{{ scope.row.name }}</p>
            <p style="font-size: 14px">诊断：{{ scope.row.diagName }}</p>
            <p style="font-size: 14px">电话：{{ scope.row.linkmanTel }}</p>
            <p style="font-size: 14px">日期：{{ scope.row.createTime }}</p>
            <div style="font-size: 14px; display: flex">
              <div style="flex: 0 0 42px">备注:</div>
              <div style="font-size: 14px; color: red">
                {{ scope.row.beiZhu }}
              </div>
            </div>
          </template> </el-table-column
        >>
        <el-table-column
          prop="examineListName"
          align="center"
          label="检验套组"
        />
        <el-table-column prop="doneExamine" align="center" label="已检验" />
        <el-table-column
          prop="examineProgress"
          align="center"
          label="检验进度"
          width="120"
        />
        <el-table-column prop="notInspectName" align="center" label="未检查" />
        <el-table-column prop="inspectName" align="center" label="已检查" />
        <el-table-column
          prop="inspectProgress"
          align="center"
          label="检查进度"
          width="120"
        />
      </el-table>
     </div>
      <div style="text-align: right; padding: 8px 0 0 0">
        <Pagination
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :page-size="pageSize"
          @pagation="pagationChange"
        />
      </div>
    </Container>
  </ContainerGroup>
</template>

<script>
import ContainerGroup from "../../components/ContainerGroup.vue";
import dayjs from "dayjs";
import {
  getReportList,
  getReportListDownLoadExcel,
} from "../../utils/apis/preparedness";
import { getDoctList } from "../../utils/apis/registrationApi";
import Pagination from '@/components/pagination'
export default {
  name: "CheckReport",
  components: { ContainerGroup, Pagination },
  data() {
    return {
      total:0,
      pageNum: 1,
      pageSize: 10,
      ysLoading: false,
      spanArr: [],
      psition: 0,
      loading: false,
      tableData: [],
      ruleForm: {
        jobNumber: "",
        deptCodeList: [],
        timeDate: this.initTimeDate(7),
      },
      options: [],
    };
  },
  mounted() {
    this.getSpanArr();
  },
  methods: {
     pagationChange(payload) {
      this.pageNum = payload.page
      this.pageSize = payload.pageSize
      this.getSpanArr()
    },
    getSpanArr() {
      const params = {
        deptCodeList: [],
        jobNumber: this.ruleForm.jobNumber,
        startTime: this.ruleForm.timeDate[0],
        endTime: this.ruleForm.timeDate[1],
        pageSize:this.pageSize,
        pageIndex:this.pageNum
      };
      this.loading = true;
      getReportList(params).then((res) => {
        this.loading = false;
        if (res.data.code === 200) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total
          this.rowspan();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    rowspan() {
      this.spanArr = [];
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (
            this.tableData[index].deptName ===
            this.tableData[index - 1].deptName
          ) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
      console.log(this.spanArr);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 表格合并行
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    _DownLoad() {
      const params = {
        deptCodeList: [],
        jobNumber: this.ruleForm.jobNumber,
        startTime: this.ruleForm.timeDate[0],
        endTime: this.ruleForm.timeDate[1],
      };
      getReportListDownLoadExcel(params).then((res) => {
        // if (res.data.code === 200) {
        const blob = new Blob([res.data]);
        const fileName = "日报表(院前)" + ".xlsx";
        const URL = window.URL || window.webkitURL || window.moxURL;
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName; // 命名下载名称
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob); // 表示一个指定的file对象或Blob对象
          document.body.appendChild(elink);
          elink.click(); // 点击触发下载
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
        // }
      });
    },

    _search() {
      this.getSpanArr();
    },

    initTimeDate(val) {
      let currDate = new Date().getTime();
      let beforeXDay = currDate - 1000 * 60 * 60 * 24 * val;
      return [
        dayjs(beforeXDay).format("YYYY-MM-DD 00:00:00"),
        dayjs(currDate).format("YYYY-MM-DD 23:59:59"),
      ];
    },

    getDoctListVue(query) {
      if (query !== "") {
        this.ysLoading = true;
        getDoctList({ deptCode: [], name: query }).then((res) => {
          this.ysLoading = false;
          if (res.data.code === 200) {
            this.options = [];
            let dats = {
              label: "",
              value: "",
            };
            res.data.data.forEach((element) => {
              dats = {
                lable: element.name,
                value: element.id,
              };
              this.options.push(dats);
            });
          }
        });
      } else {
        this.options = [];
      }
    },
  },
  filters: {
    timeFormater(value, str = "YYYY-MM-DD HH:mm:ss") {
      return dayjs(value).format(str);
    },
  },
};
</script>

<style lang="less" scoped>
.table-box{ 
  flex: 1;
  overflow: hidden;
}
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .right-btn {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px 10px;
  }
}
</style>
